<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>


<html:html>
<head>
	<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/stkissue2.css" />

<script type="text/javascript" >
function returnToMainForm(lineNumber, itemOffset) {
	
	var	orderQty	= 	document.getElementById("orderQty").value;
	
	opener.document.getElementById("qty"+lineNumber).value = orderQty;
									
	window.close(); 
}
</script>


<style>

.odd{background-color:#fFA700; }
.even{background-color:#EE0000; }

.menu-over{background-color:#64b1ff;}

</style>	
</head>

<body onload="document.getElementById('itemFind').focus();">

<table >
	<tr>
		<td><div id="chart_div" style="width: 400px; height: 400px;"></div></td>
		<td>
	<center>
		
		<div><center>${itemCode}</center>
		<table border="1">
			
			<tr class="odd">
				<td width="20">No.</td>
				<td width="40">History</td>
				<td width=100>Used Qty </td>
				
			</tr>
			<logic:notEmpty name="itemResults">
				<logic:iterate id="var" name="itemResults" indexId="id">
						
						
						<tr onmouseover="this.className='menu-over'" 
							onmouseout="this.className='even'" class="even">
							<td>${id+1+offset }.</td>
							<td>
									<label id="ym${id+1+offset }" style="cursor:pointer" >
										${var.year_ }-${var.month_ }
									</label>
								
								<input type="hidden" value="${var.usedQty }" name="qty${id+1 }" id="qty${id+1 }" />
								
							</td>
							<td><label id="itemName${id+1+offset }">${var.usedQty }</label></td>
						</tr>					
				</logic:iterate>
			</logic:notEmpty>
		</table>
		
		<table border="1">			
			<tr class="odd">
				<td width="120">Stock</td>
				<td width="120">Reserved</td>
				<td width="120">Order PO</td>
				<td width="120">Min</td>
				<td width="120">Max</td>
			</tr>
			<logic:notEmpty name="item">
				<logic:iterate id="var" name="item" indexId="id">			
					<tr class="even">
						<td width="120">${var.stockQty }
						<td width="120">${var.qtyReserved }</td>
						<td width="120">${var.qtyOfPO }</td>
						<td width="120">${var.stockMin }</td>
						<td width="120">${var.stockMax }</td>
					</tr>
				</logic:iterate>
			</logic:notEmpty>			
			<tr class="odd">
				<td width="120">Avg.12m</td>
				<td width="120">Avg.6m</td>
				<td width="120">Avg.3m</td>
				<td colspan="2" rowspan="2">
					<input type="text" name="orderQty" value="" 
						   id="orderQty" style="width:100px;height:45px;font-size=2em" align="right">
					</input> 
					<a href="#" onclick="returnToMainForm(${lineNumber},${id+1+offset })" >ok</a></td>
			</tr>
			<tr class="even">
				<td width="120"><label id="avg12"></label></td>
				<td width="120"><label id="avg6"></label></td>
				<td width="120"><label id="avg3"></label></td>

			</tr>						
		</table>
		</div>
		
		
				
	</center>		
		</td>
	</tr>
</table>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      var qty = new Array();
      var ym = new Array();
      
      function drawChart() {
          var sum=0;
          for(var i=1; i<=12; i++) {
              qty[i] = parseFloat(document.getElementById("qty"+i).value);
              ym[i] = document.getElementById("ym"+i).innerHTML;
              sum+=qty[i];
          }
          var avg12 = Math.round((sum/12)*1000)/1000;
          var avg6 = Math.round(((qty[7]+qty[8]+qty[9]+qty[10]+qty[11]+qty[12])/6)*1000)/1000;
          var avg3 = Math.round(((qty[10]+qty[11]+qty[12])/3)*1000)/1000;
          
          document.getElementById("avg12").innerHTML=avg12;
          document.getElementById("avg6").innerHTML= avg6;
          document.getElementById("avg3").innerHTML= avg3;

          if(avg12*0.3<=avg3 || avg3==0) {
			  document.getElementById("orderQty").value = Math.round(avg12*0.3);
		  }else {
			  document.getElementById("orderQty").value = Math.round(avg3);
		  }
          
          
        var data = google.visualization.arrayToDataTable([
          ['zz', 'usedQty' ],          
          [ym[1],  qty[1] ],
          [ym[2],  qty[2] ],
          [ym[3],  qty[3] ],
          [ym[4],  qty[4] ],
          [ym[5],  qty[5] ],
          [ym[6],  qty[6] ],
          [ym[7],  qty[7] ],
          [ym[8],  qty[8] ],
          [ym[9],  qty[9] ],
          [ym[10],  qty[10] ],
          [ym[11],  qty[11] ],          
          [ym[12],  qty[12] ]
        ]);

        var options = {
          title: 'ปริมาณการใช้  ${itemCode} รอบ 12 เดือนที่ผ่านมา',
          hAxis: {title: 'Year-Month', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>					

<input type="hidden" value="${monthFind }" id="monthFindId">
<script type="text/javascript">

	var item2 = document.getElementById("monthFindId").value;	
	document.formSearch.monthFind[item2-1].selected=true;
	
</script>


</body>

</html:html>